/**********************************************************
 *                    Dialog Module                       *
 **********************************************************/
(function(){

	var uid = 0;//dialog uid
	
	/******************Paper******************/
	var paper = function( wrapper ){
		var _this = this;
		
		_this.mask = document.createElement("div");
		_this.wrapper = wrapper;

		//遮罩样式
		_this.mask.setAttribute(
				"style","position:absolute;" +
                         "width:100%;"+
                         "height:100%;"+
                         "left:0;"+
                         "top:0;"+
                         "z-index:99999;"+
                         "opacity:0;"+
                         "-webkit-user-select:none;"+
                         "background:black;"+
                         "-webkit-transition-property:opacity;"+
                         "-webkit-transition-duration:800ms;");
		wrapper.appendChild(_this.mask);
	}

	paper.prototype = {
		show : function(){
                this.mask.style.opacity = '.8';
            },
        hide : function(){
                this.mask.style.opacity = '0';
            },
        remove : function(){
                this.wrapper.removeChild(this.mask);
            },
        setBackground : function( v ){
                this.mask.style.background = v;
            },
        setWidth : function( v ){
                this.mask.style.width = v + 'px';
            },
        setHeight : function( v ){
                this.mask.style.height = v + 'px';
            },
        addEventListener : function( eventname,handler,capture ){
                this.mask.addEventListener(eventname,handler,capture);
            },
		removeEventListener : function( eventname,handler,capture ){
                this.mask.removeEventListener(eventname,handler,capture);
            }
	}

	/******************Content******************/
	var content = function( wrapper ){
		var _this = this;

		_this.container = document.createElement('div');
		_this.wrapper = wrapper;

		_this.container.setAttribute(
							   "style","position:absolute;"+
                               "background:white;"+
                               "opacity:1;"+
                               "z-index:100000;"+
                               //"-webkit-box-shadow:0px 0px 8px #333;"+
                               "-webkit-border-radius:15px;"+/*最大边角*/
                               "-webkit-transform:scale(0);"+
                               "-webkit-transform-origin:50% 50%;"+
                               "-webkit-transition-property:-webkit-transform,width,height;"+
                               "-webkit-transition-duration:300ms,700ms,700ms;"+
                               "-webkit-transition-delay:0ms,800ms,800ms;"+
                               "-webkit-user-select:none;");

         var close = document.createElement("a");
         close.setAttribute('style',"z-index:999999;display:block;position:absolute;width:29px;height:29px;overflow:hidden;display:none;-webkit-transition-property:opacity;-webkit-transition-duration:800ms;")
         close.setAttribute('href','javascirpt:;');
         _this.close = close;

         _this.container.appendChild(_this.close);
		 _this.wrapper.appendChild(_this.container);
	}

	content.prototype = {
           
           show : function(){
                this.container.style.webkitTransform = "scale(1)";
               },
           hide : function(){
                this.container.style.opacity = "0";
               },
           remove : function(){
                this.wrapper.removeChild(this.container);
               },
           setX : function(v){
                this.container.style.left = v+"px";
               },
           setY : function(v){
			   	this.container.style.top = v+"px";
               },
           setWidth : function(v){
                this.container.style.width = v+"px";
               },
           setHeight : function(v){
                this.container.style.height = v+"px";
               },
           addEventListener : function( eventname,handler,capture ){
                this.container.addEventListener(eventname,handler,capture);
            },
           getCloseBtn:function(){
               return this.close;
           },
           setContent: function(v){
                 if( v && v.nodeName ){
                     this.container.appendChild(v);
                 }else{
                     alert('set dialog content failed.');
                 }
               }
               
	};

	/******************Dialog******************/
	var dialog = function( el,opts ){
		var _this = this;

		el = el || document.body;

		_this.uid = ++uid;
        _this.baseElement = ( typeof el == 'object' && el.nodeName ) ? el : document.getElementById(el);
		_this.options = {
			modal : false,
			contentdom : document.createElement("div"),
		}

		if( "modal" in opts ){
			_this.options.modal = opts.modal;
		}

		if( "contentdom" in opts ){
			_this.options.contentdom = opts.contentdom;
		}

		_this.dPaper = new paper(_this.baseElement);
		_this.dContent = new content(_this.baseElement);

		_this.dContent.setContent(_this.options.contentdom);
		_this.update();

        _this.dContent.getCloseBtn().onclick = function(){
            _this.dispose();
        }
       _this.dPaper.addEventListener("mouseup",_this,false);

	}

	dialog.prototype = {

		handleEvent : function(e){
			switch(e.type){
				case "mouseup":
					e.stopPropagation();
					if(!!!this.options.modal){
						this.dispose();
					}
				break;
			}
		},
        
        getCloseBtn : function(){
            return this.dContent.getCloseBtn();
        },

		update : function(){
			//content相对paper居中
			var paperWidth = this.dPaper.mask.clientWidth,
				paperHeight = this.dPaper.mask.clientHeight,
				contentWidth = this.dContent.container.clientWidth,
				contentHeight = this.dContent.container.clientHeight;

			var r1 = paperWidth - 200;

			this.dPaper.setBackground("-webkit-gradient(radial, center center, "+ 0 +",center center, "+ r1 +", from(rgba(0,0,0,0)),color-stop(25%,rgba(0,0,0,.3)),to(rgba(0,0,0,1)))");

            this.dContent.getCloseBtn().style.left=contentWidth-32/2+"px";
            this.dContent.getCloseBtn().style.top=-24/2+"px";
			this.dContent.setX((paperWidth-contentWidth)/2);
			this.dContent.setY((paperHeight-contentHeight)/2);
		},

		show : function(){
                var _this = this;
                    setTimeout(function(){//动画效果必须放在timeout中,原因未知
                        _this.dPaper.show();
                        _this.dContent.show();
                    },0);
		},
            
        dispose : function(){
                var _this = this;
                this.dPaper.hide();
                this.dContent.hide();
                this.dPaper.addEventListener("webkitTransitionEnd",function(e){
                    _this.dPaper.remove();
                    _this.dPaper.removeEventListener("mouseup",_this,false);
                },false);
                this.dContent.addEventListener("webkitTransitionEnd",function(e){
                    _this.dContent.remove();
                },false);
		}
	}

	window.dialog = dialog;
})();
